<template>
  <div class="home" >
    <div class="home-icon">
      <SvgIcon  name="哈士奇" size="80" color="#000"  />
      <n-button type="primary" @click="count++">
        计数{{count}}{{obj?.event??''}}
      </n-button>
    </div>
        <object class="main-pdf" type="application/pdf" data="/vue3-naive-cli.pdf"></object>

  </div>
</template>

<script setup lang="ts">
import { testPost1 } from '@/api/index';
import { useMessage } from 'naive-ui'
import { ref } from 'vue';
const message = useMessage();
const obj = ref<ApiResponse<typeof testPost1>>();

testPost1({
  event: '哈士奇', 
}).then((res) => {
obj.value=res.data
}).catch((err) => {
  console.log(err);
  message.error('请求失败')
  })

const count = ref(0);
</script>

<style lang="scss" scoped>

.home{
  display: flex;
  flex-direction: column;
  align-items: center;
height: 100vh; 
}
.home-icon{
  display: flex;
  width: 100%;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.main-pdf{
  width: 100%;
flex: 1 1 0;
min-height: 0;
 border: none;
}
</style>
 